import React, {useEffect, useState, useRef} from 'react'
import {Button, Space, message, Popconfirm} from 'antd'
import {history, connect} from 'umi'
import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import Permissions from '@/components/Permissions'
// api调用
import {getTableList, deleteStandby} from '@/service/carMessage/standby'

const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}
const renewalDom = () => {
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])
	const [formData, setFormData] = useState<any[]>()
	const [otherData, setOtherData] = useState<any>()
	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		getTableList({
			...params,
			...otherData,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data?.records)
					setTotal(res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}

	// 自定义一个初始不更新的hook
	const useUpdateEffect = (fn: Function, inputs: any[]) => {
		const didMountRef = useRef(false)
		useEffect(() => {
			if (didMountRef.current) fn()
			else didMountRef.current = true
		}, inputs)
	}

	// 使用自定义hook
	useUpdateEffect(onListFun, [params])

	// 删除事件
	const onDeleteFun = (ids: string) => {
		deleteStandby(ids)
			.then((res) => {
				if (res?.success) {
					message.success(res.msg)
					onListFun()
				}
			})
			.catch((err) => {
				message.error(err)
			})
	}
	// 列表
	const columns: any = [
		{
			title: '序号',
			dataIndex: 'order',
			align: 'center',
			width: 70,
			render(text: any, record: any, index: any) {
				return <span>{(params.current - 1) * 10 + index + 1}</span>
			},
		},
		{
			title: '所属公司',
			dataIndex: 'companyName',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '所属城市',
			dataIndex: 'cityName',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '备车流程名称',
			dataIndex: 'processName',
			align: 'center',
			width: 150,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '设置人',
			dataIndex: 'createName',
			align: 'center',
			width: 150,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '最近更新时间',
			dataIndex: 'updateTime',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '选中的节点名称',
			dataIndex: 'processNodeStr',
			align: 'center',
			width: 260,
			render: (text: string) => (
				<div className="ellipsis" style={{width: 240}} title={text}>
					{text || '--'}
				</div>
			),
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 250,
			render: (text: string, record: any) => (
				<div>
					<Permissions permissionID="amc_assetCenter_carMessage_standby_view">
						<Button
							type="link"
							size="small"
							onClick={() => {
								history.push({
									pathname: '/carMessage/standby/view',
									query: {
										id: record.id,
									},
								})
							}}>
							详情
						</Button>
					</Permissions>
					<Permissions permissionID="amc_assetCenter_carMessage_standby_edit">
						<Button
							type="link"
							size="small"
							onClick={() => {
								history.push({
									pathname: '/carMessage/standby/edit',
									query: {
										id: record.id,
									},
								})
							}}>
							编辑
						</Button>
					</Permissions>
					<Permissions permissionID="amc_assetCenter_carMessage_standby_log">
						<Button
							type="link"
							size="small"
							onClick={() => {
								message.error('后台未提供接口')
							}}>
							日志
						</Button>
					</Permissions>
					<Permissions permissionID="amc_assetCenter_carMessage_standby_delete">
						<Popconfirm
							placement="topLeft"
							title="你确定要删除这条备车流程数据吗？"
							onConfirm={() => onDeleteFun(record.id)}
							okText="确定"
							cancelText="取消">
							<Button type="link" size="small">
								删除
							</Button>
						</Popconfirm>
					</Permissions>
				</div>
			),
		},
	]

	// 初始化分页
	useEffect(() => {
		const param = {
			current: 1,
			size: 10,
		}
		setParams(() => param)
	}, [otherData])

	// 搜索
	const onFinish = (values: any) => {
		setOtherData(values)
	}

	// 重置
	const onReset = () => {
		setOtherData({})
	}

	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						key: 'processName',
						name: 'processName',
						label: '备车流程名称',
					},
					{key: '1'},
					{key: '2'},
				],
			},
		]
		setFormData(formItems)
	}, [])

	return (
		<div className={styles.page}>
			<div className="search">
				{formData && (
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				)}
			</div>
			<div className="btnlist">
				<Space size={12}>
					<Permissions permissionID="amc_assetCenter_carMessage_standby_add">
						<Button
							type="primary"
							ghost
							size="small"
							onClick={() => {
								history.push({
									pathname: '/carMessage/standby/add',
								})
							}}>
							新增
						</Button>
					</Permissions>
				</Space>
			</div>
			<div className="table">
				<CustomTable
					kid="id"
					params={params}
					columns={columns}
					pagination
					total={total}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({user}))(renewalDom)
